<template>
  <Container class="manage-list">
    <div class="container-header head-form" slot="header">
      <Form class="search">
        <Row>
          <i-col span="6">
            <FormItem label="编码款号">
              <Input v-model.trim="list.form.number" placeholder="编码款号" clearable @on-enter="onSearchBtnClick" />
            </FormItem>
            <FormItem label="品类" class="w115">
              <Input v-model.trim="list.form.category" placeholder="品类" clearable @on-enter="onSearchBtnClick" />
            </FormItem>
          </i-col>
          <i-col span="5">
            <FormItem label="性别">
              <Select v-model="list.form.sex" clearable @on-change="onSearchBtnClick">
                <Option v-for="(item, index) in list.options.sexList" :key="index" :value="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <!-- <FormItem label="款式属性">
              <Input v-model.trim="list.form.style" placeholder="款式属性" clearable @on-enter="onSearchBtnClick" />
            </FormItem> -->
            <FormItem label="款式属性: ">
              <Cascader transfer :data="listed" v-model="list.form.style" :load-data="loadData"></Cascader>
            </FormItem>
          </i-col>
          <i-col span="5">
            <FormItem label="季节">
                <Select v-model="list.form.season" >
                  <Option v-for="(item, index) of jijie"  :key="index" :value="item.id">{{item.name}}</Option>
                </Select>
            </FormItem>
            <FormItem label="特征码">
              <Select v-model="list.form.te_code_arr" multiple  clearable >
                <OptionGroup v-for="(item, index) of codeList" :label="item.name" :key="index" >
                  <Option v-for="todo in item.child" :value="todo.id" :key="todo.id">{{ todo.name }}</Option>
                </OptionGroup>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="5">
            <FormItem label="年份">
              <DatePicker v-model="list.form.decade" :clearable="true" format="yyyy-MM-dd" type="year" placement="bottom-start" placeholder="选择日期" />
            </FormItem>
          </i-col>
          <i-col span="2" class-name="search">
            <Button class="btn-search large" type="primary" icon="ios-search" @click="onSearchBtnClick" />
          </i-col>
        </Row>
      </Form>
    </div>
    <Tabs v-model="tab">
      <Button 
        size="large" 
        class="item"
        type="primary"
        slot="extra"
        @click="onAddAccount">录入</Button>
      <TabPane label="数据库">
        <Table 
          :height="options.tableHeight" 
          stripe
          :columns="list.columns" 
          :data="list.data" 
          no-data-text="亲，没有找到相关记录哦！~"></Table>
        <div class="pager">
          <Page 
          :total="list.totalItem" 
          :current="list.currentPage"
          :page-size="list.pageSize"
          @on-change="onPageChange"
          @on-page-size-change="onPageSizeChange"
          show-sizer
          placement="top"></Page>
        </div>
        <Loader :status="list.status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
    <FormJoinItem ref="formjoin"></FormJoinItem>
  </Container>
</template>
<script>
import table from '@/table'
import LibraryListData from './list/LibraryListData'
import FormJoinItem from "./edit/FormJoinItem"
import { clearEmpty, formatDate } from '@/util'
export default {
  name: 'setting/account/list',
  components: {
    FormJoinItem
  },
  data() {
    return {
      list: LibraryListData,
      codeList: [],
      keyword: '',
      listed: [{
        value: '1',
        label: '男装',
        children: [],
        loading: false
      }, {
        value: '2',
        label: "女装",
        children: [],
        loading: false
      }, {
        value: '3',
        label: '童装',
        children: [],
        loading: false
      }],
      options: {
        tableHeight: 300
      },
      jijie: []
    }
  },
  mounted() {
		this.list.currentPage = ~~this.$route.query.currentPage || 1
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize
    this.initTable()
    this.$bus.$on('onEdit', this.onEdit)
    this.$bus.$on('onDelete', this.onDelete)
    this.getData()
    this.getCodeData()
    this.getPyList()
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    ...table,
    onSearchBtnClick() {
      this.list.currentPage = 1
      this.getData()
    },
    loadData(item, callback) {
      item.loading = true
      console.log(item)
      this.$ajaxGet(`/order/styleList?style_type=${item.value}`).then(data => {
        item.loading = false
        let child = item.children = data.map((item, index) => {
          return {
            value: item,
            label: item
          }
        })
        this.$set(item, 'children', child)
        callback()
      })
    },
      // 季节
    getPyList() {
      this.$ajaxGet('/system/pyList', {type: 'jijie'}).then(res => {
        this.jijie = res.map(item => {
          return {
            id: item.id.toString(),
            name: item.name
          }
        })
      })
    },
    getCodeData() {
      this.status = 'loading'
      return new Promise((resolve)=> {
         this.$ajaxGet(`/system/teCode`).then(data => {
         this.status = 'pass'
         for (let key in data) {
           let item  = {
             name: key,
             te_code: [],
             child: data[key]
           }
           this.codeList.push(item)
         }
         console.log(this.codeList)
          resolve(this.codeList)
         return this.codeList
       })
      })
    },
    getData() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        number: this.list.form.number,
        sex: this.list.form.sex,
        season: this.list.form.season,
        category: this.list.form.category,
        style: this.list.form.style,
        te_code_arr: this.list.form.te_code_arr
      }
      param.decade = formatDate( this.list.form.decade, true)
      param = clearEmpty(param)
      this.list.status = 'loading'
      this.$jsonPost('/store/list', param).then(data => {
        this.list.data = (data.data || [])
        this.list.totalItem = Number(data.total)
        this.backTableTop()
        this.list.status = 'pass'
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    onAddAccount() {
      this.onEdit({type: 'add'})
    },
    onPageChange(number) {
			this.list.currentPage = number
			this.$router.push({
				name: 'source/library/list',
				query: {
					currentPage: this.list.currentPage,
					pageSize: this.list.pageSize
				}
			})
      this.getData()
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1
			this.list.pageSize = pageSize
			this.$router.push({
				name: 'source/library/list',
				query: {
					currentPage: this.list.currentPage,
					pageSize: this.list.pageSize
				}
			})
      this.getData()
    },
    onEdit(item) {
      // 录入 编辑 表单版本 下载
      switch (item.type) {
        case 'edit':
          this.$router.push({name: 'source/library/edit', query: {type: item.type, id: item.row.store_order_id}})
          break;
        case 'down':
          window.location.href = item.row.down_url
          break;
        case 'add':
          this.$router.push({name: 'source/library/edit', query: {type: item.type}})
          break;
        case 'excel':
          this.$refs.formjoin.open(item.row)
          break;
        case 'look':
          this.$router.push({name: 'source/library/edit', query: {type: item.type, id: item.row.store_order_id}})
          break;
      }
    },
    onDelete(id, name) {
      this.$Modal.confirm({
        title: '删除',
        content: '确定删除当前账号？',
        onOk: () => {
          this.$ajaxGet('/supplier/supplier_user/remove/' + id).then(() => {
            this.$Notice.success({
              title: '删除成功',
              desc: `<span class="font-red">${name}</span> 已被删除。`
            })
            this.getData()
          })
        }
      })
    }
	},
	watch: {
		$route() {
			let page = ~~this.$route.query.currentPage
			let table = this.list
			if (table.currentPage !== page) {
				table.currentPage = ~~this.$route.query.currentPage === 0 ? 1 : ~~this.$route.query.currentPage
				this.getData()
			}
		}
	}
}
</script>